<template>
  <div class="center-section-content">
    <div class="per-tabs">
      <div
        v-for="item in perList"
        :key="item.name"
        :class="['per-tab', { active: activePer === item.name }]"
        @click="handlePerClick(item)"
      >
        <div class="per-tab-name">{{ item.name }}</div>
        <div class="item-content">
          <div
                  v-for="data in item.perData"
                  :key="data.id"
                  :class="['per-tab-item', { active: activeItem === data.localName }]"
                  @click.stop="handlePerDataClick(data, item)"
          >
            {{ data.localName }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template> 

<script>
import { EventBus } from "../../utils/event-bus";

export default {
  name: "Center",
  data() {
    return {
      activeItem:"",
      activePer: "",
      perList: [
        {
          id: "evergreen",
          name: "常绿阔叶林",
          perData: [
            {
              id: "c1",
              localName: "c1",
              type: "evergreen",
              deviceData: "",
            },
            {},
            {},
            {},
            {},
          ],
        },
        {
          id: "deciduous",
          name: "落叶阔叶林",
          perData: [
            {
              id: "c2",
              localName: "c2",
              type: "deciduous",
              deviceData: "",
            },
          ],
        },
        { id: "broadleaf", name: "阔叶混交林 " },
        { id: "coniferous", name: "常绿针叶林" },
        { id: "ferous", name: " 落叶针叶林" },
        { id: "theropencedrymion", name: "针阔混交林 " },
        { id: "bamboo", name: " 竹林" },
      ],
      devices: [],
    };
  },
  mounted() {
    this.$api.sample.getListForType().then((res) => {
      this.activePer = res[0].name;
      this.perList = res;
      setTimeout(() => {
        this.handlePerDataClick(this.perList[0].perData[0], this.perList[0]);
      }, 1000);
    });
  },
  methods: {
    handlePerClick(item) {
      if (this.activePer != item.name) {
        this.activePer = item.name;
        // EventBus.$emit("set-markers", item.perData);
        EventBus.$emit("set-polygons", item.perData);
        EventBus.$emit("sent-device-id-to-right", item.perData[0]);
      }
    },
    handlePerDataClick(perData, item) {
      this.activePer = item.name;
      // EventBus.$emit("set-markers", item.perData);
      this.activeItem = perData.localName;
      EventBus.$emit("set-polygons", item.perData);
      EventBus.$emit("sent-device-id-to-right", perData);
      var position ={lon:0,lat:0,zoom:18};
      for (let j = 0; j < perData.polygon.length; j++) {
        position.lon=perData.polygon[j][0]+position.lon;
        position.lat=perData.polygon[j][1]+position.lat;
      }
      position.lon=position.lon/perData.polygon.length;
      position.lat=position.lat/perData.polygon.length;
      EventBus.$emit("setMapPosition", position);
    },
    addMapMarkers(sample) {
      // 根据设备类型获取对应的标注数据
      let apiUrl = "";
      let deviceType = "sample";
      EventBus.$emit("set-biological-device-type", sample.type);
      switch (device.name) {
        case "气象":
          apiUrl = "/cockpitapi/habitat/qixiang/getDeviceList";
          deviceType = "qixiang";
          break;
        case "空气":
          apiUrl = "/cockpitapi/habitat/qixiang/getDeviceList";
          deviceType = "kongqi";
          break;
        case "水质":
          apiUrl = "/cockpitapi/habitat/qixiang/getDeviceList";
          deviceType = "shuizhi";
          break;
        case "土壤":
          apiUrl = "/cockpitapi/habitat/qixiang/getDeviceList";
          deviceType = "turang";
          break;
        default:
          return;
      }

      // 调用API获取设备位置数据
      this.$api.environment
        .getDeviceList(device.type)
        .then((response) => {
          if (response) {
            // 通过 Vuex 更新标注数据
            this.$store.dispatch("map/updateMarkers", {
              markers: response.map((item) => ({
                ...item,
                icon: this.getMarkerIcon(deviceType, 1),
              })),
              deviceType: device.name,
            });
          }
        })
        .catch((error) => {
          console.error("Error fetching device locations:", error);
        });
    },
    getMarkerIcon(deviceType, status) {
      const statusMap = {
        1: "normal",
        2: "offline",
        3: "abnormal",
      };
      const statusSuffix = statusMap[status] || "normal";
      return require(`@/assets/img/${deviceType}-${statusSuffix}.png`);
    },
  },
};
</script>

<style lang="scss" scoped>
.per-tabs {
  width: 840px;
  display: flex;
  gap: 10px;
  padding: 10px 10px 5px 10px;
}

.per-tab {
  width: 98px;
  height: 180px;
  padding: 5px;
  pointer-events: auto;
  cursor: pointer;
  color: #fff;
  font-size: 14px;
  text-align: center;
  background: url("@/assets/img/per-tab-bg.png") no-repeat center;
  background-size: 100% 100%;
  transition: all 0.3s ease;
  user-select: none;
  &.active {
    .per-tab-name {
      color: #07ffe5;
    }
  }
  .per-tab-name {
    font-weight: bold;
    background: url("@/assets/img/per-tab-name-bg.png") no-repeat center;
    background-size: 100% 100%;
    color: #fff;
    height: 36px;
    line-height: 36px;
    font-size: 12px;
    overflow: hidden;
  }
  .item-content{
    width: 98px;
    height: 140px;
    overflow: auto;
    .per-tab-item {
      height: 29px;
      line-height: 30px;
      font-size: 12px;
      overflow: hidden;
      &:hover {
        color: #07ffe5;
      }
      &.active {
        color: #07ffe5;
      }
    }
  }


}
</style>
